<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			id:<input type="text" v-model="id"/>
			姓名:<input type="text" v-model="name" @keyup.enter="add()"/>
			<input type="button" @click="add" value="添加"/>
			<hr/><br/>
			<table border="1px" cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>id</th>
						<th>姓名</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in datas" :key="item.id">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<td>{{ item.ctime | dateFormat}}</td>
						<td><a href="" @click.prevent="del(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<hr/>
			姓名:<input type="text" v-model="kw"/>
			<span v-for="item in search(kw)">
				<h2>{{ item.id}} == {{ item.name}}</h2>
			</span>
			<hr/><br/>
			
			测试:<input type="text" v-model="test"/>
			<h2>{{test|revers}}</h2>
			<hr/>
			按键测试:<input type="text" @keyup.f2="testKeyup"/>
			<hr/>
			测试全局指令:<input type="text" v-focus value="自动获得焦点"/>
			局部指令:<input type="text" v-setred="red" value="哈哈哈"/>
			局部指令传值对象:<input type="text" v-style="{color:'red',text:'的健身房'}" value="哈哈哈"/>
			<hr/>
			<button @click="getData">vue-resource get获取数据</button>
			<hr/>
			<comm></comm>
			<comm2 mymsg="我是谁" :flag="kw"></comm2>
			<hr/>
			切换组件方法1
			<a href="" @click.prevent="flag=true">登录</a>
			<a href="" @click.prevent="flag=false">注册</a>
			<login v-if="flag"></login>
			<register v-else="flag"></register>
			<hr>
			切换组件方法2
			<a href="" @click.prevent="compName='login'">登录</a>
			<a href="" @click.prevent="compName='register'">注册</a>
			<component :is="compName"></component>
			<hr/>
			调用父组件的方法
			<!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
			<comp4 @func="testComp"></comp4>
		</div>
		
		<template id="tmp2">
			<div>
				<h3>我是组件标题</h3>
				<p>放假德生科技风控了啥打击风控了啥打击</p>
			</div>
		</template>
		<template id="tmp3">
			<div>
				<h3>我是组件标题3</h3>
				<p>放假德生科技风控了啥打击风控了啥打击3</p>
			</div>
		</template>
		<template id="tmp4">
			<input type="button" value="调用父组件的方法" @click="sonClick"/>
		</template>
	</body>
	<script>
		//全局过滤器
		Vue.filter("dateFormat",function(str){
			var date = new Date(str);
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return `${y}-${m}-${d}`;
		});
		//全局按键提示
		Vue.config.keyCodes.f2 = 113;
		//自定义全局指令
		Vue.directive('focus', {
			//bind是在dom树绘制前调用，inserted在dom树绘制后调用
			inserted:function(el){
				el.focus();
			}
		});
		
		//创建全局组件
		//方式1
		/* var comm = Vue.extend({template:"<h3>我是全局组件哈哈</h3>"});
		Vue.component("comm",comm); */
		//方式2   //不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
		/* Vue.component("comm",{
			template:"<div><h3>我是全局组件哈哈</h3></div>"
		}); */
		//方式3
		Vue.component("comm",{
			template:"#tmp2" //通过元素id获取模板
		});
		//组件带有data 
		//组件中的 data 必须是一个方法,必须返回一个对象才行 和实例data使用方式完全一样
		Vue.component("comm2",{
			template:"<div><h2>我是组件2{{ msg}}</h2><button @click='demo'>组件自带的方法{{flag}}</button></div>",
			data:function(){
				return {
					msg:"组件自带msg"
				}
			},
			props:['mymsg','flag'], //组件属性
			methods:{
				demo(){
					alert("data:"+this.msg+",props:"+this.mymsg);
				}
			}
		});
		
		Vue.component("login",{
			template:"<h3>我是登录组件</h3>"
		});
		Vue.component("register",{
			template:"<h3>我是注册组件</h3>"
		});
		
		
		var comp4 = {
			template:"#tmp4",
			methods:{
				sonClick(){
					console.log("我是子组件的方法");
					// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
					//  emit 英文原意： 是触发，调用、发射的意思
					// this.$emit('func123', 123, 456) //带参数可以这样
					this.$emit('func')
				}
			}
		};
		var vue = new Vue({
			el:"#app",
			data:{
				kw:"",
				id:"",
				name:"",
				datas:[
					{id:"1",name:"张三",ctime:new Date()},
					{id:"2",name:"李四",ctime:new Date()}
				],
				test:"",
				flag:true,
				compName:"login"
			},
			methods:{
				add(){
					this.datas.push({id:this.id,name:this.name,ctime:new Date()});
					this.id = "";
					this.name = "";
				},
				del(id){
					for(var i = 0;i<this.datas.length;i++){
						if(this.datas[i].id === id){
							this.datas.splice(i,1);
						}
					}
				},
				search(kw){
					let info = this.datas.filter(x=>
						x.name.indexOf(kw) != -1
					);
					return info;
				},
				testKeyup(){
					alert("测试按键");
				},
				getData(){
					this.$http.get("http://127.0.0.1:8848/paytmp/test/test.html",{"data":"aaaa"}).then(
						function(res){
							alert(res.body);
						},
						function(e){
							console.log('请求失败处理',e);
						}
					);
				},
				testComp(){
					alert("我是父组件的方法");
				}
			},
			//局部过滤器
			filters:{
				dateFormat:function(str){
					var date = new Date(str);
					var y = date.getFullYear();
					var m = date.getMonth()+1;
					var d = date.getDate();
					var hh = date.getHours().toString().padStart(2,"0");
					var mm = date.getMinutes().toString().padStart(2,"0");
					var ss = date.getSeconds().toString().padStart(2,"0");
					return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~~`;
				},
				revers:function(str){
					return str.split("").reverse().join("");
				}
			},
			directives:{
				setred:{
					bind:function(el){
						el.style.background = 'red';
					}
				},
				style:{
					bind:function(el,bind){
						el.style.background = bind.value.color;
						el.value = bind.value.text;
					}
				}
			},
			//局部组件
			components:{
				comm:{
					template:"#tmp3"
				},
				comp4
			},
			//vue生命周期钩子函数
			beforeCreate:function(){
				//el 和 data 并未初始化
				console.log("执行了beforeCreate"+this.datas+"=="+this.$el);
			},
			created:function(){
				//完成了 data 数据的初始化，el没有
				console.log("执行了created"+this.datas+"=="+this.$el);
			},
			beforeMount:function(){
				//完成了 el 和 data 初始化
				//模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
				//执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
				console.log("执行了beforeMount"+this.datas+"=="+this.$el);
			},
			mounted:function(){
				//dom树已经生成到页面
				//已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
				console.log("执行了mounted"+this.datas+"=="+this.$el);
			},
			beforeUpdate(){
				//这时候，表示 我们的界面还没有被更新,数据被更新了
				//页面中的显示的数据，还是旧的，此时 data 数据是最新的
			},
			updated(){
				//updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
			}
		});
	</script>
</html>
